<template>
  <el-card class="box-card">
    <MainGoBack name="检测预警"></MainGoBack>
    <MainSearchForm ref="detailSearchForm" :formList="formList" :formValue="formValue" @formReset="formChange" @formSearch="formChange"></MainSearchForm>
    <div class="main_table mg-t-0" style="min-height: 600px">
      <MainTable
        ref="detectionTable"
        :loading="listLoading"
        :columns="columns"
        :tableData="tableData"
        showIndex
      >
        <template v-slot:result="{ row }">
          <span class="result" :style="{ color: row.result ? '#03A98E' : '#F56C6C' }">{{ row.result  ? '合格' : '不合格' }}</span>
        </template>
        <el-table-column label="检测报告" width="200">
          <template slot-scope="scope">
            <MainLink title="查看报告" @linkClick="linkClick(scope.row)"></MainLink>
          </template>
        </el-table-column>
      </MainTable>
      <main-dialog title="检测报告" :showDialog="resultVisibles" width="40%" @close="closeResult">
        <template v-slot:content>
          <div class="result-wrap">
            <el-image v-for="(item, index) in resultSrc" :src="item" :key="item + index" :preview-src-list="resultSrc"></el-image>
          </div>
        </template>
        <template v-slot:footer>
          <div class="main-dialog-btn align-right">
            <el-button @click="closeResult">取 消</el-button>
            <el-button type="primary" @click="closeResult">确 定</el-button>
          </div>
        </template>
      </main-dialog>
    </div>
  </el-card>
</template>
  
<script>
import { getDetectWarnDetails } from "@/api/residues/index";
import { $http } from "@/api/index";
import { mapGetters } from "vuex";
import { detailData } from '../MockData';
const { columns, formList, formValue } = detailData
export default {
  name: 'SupplierDetail',
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      detailId: null,
      deatilType: null,  //  1：查看，2审核
      columns,
      formList,
      formValue,
      tableData: [],
      listLoading: false,
      projectId: '',
      good_spu_id: '',
      resultVisibles: false,
      resultSrc: []
    }
  },
  activated() {
    this.formValue.real_time = this.$route.query.real_time
    this.formValue.goods_name = this.$route.query.name
    this.projectId = this.$route.query.id
    this.good_spu_id = this.$route.query.good_spu_id
    this.getOptions()
    this.getData()
  },
  deactivated() {
    this.$refs.detailSearchForm.getFormRefs().resetFields()
  },
  mounted() {
  },
  methods: {
    //  表单搜索
    formChange() {
      this.getData()
    },
    getOptions() {
      let data = {
        page: 1,
        page_size: 200,
      };
      $http('/Supplier/supplier-list', data).then(
        (res) => {
          this.formList[2].options = res.data.list.map(el => {
            return {
              label: el.name,
              value: el.company_id
            }
          });
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getData() {
      this.listLoading = true;
      let params = {
        ...this.formValue,
        detect_start_date: this.formValue.real_time[0],
        detect_end_date: this.formValue.real_time[1],
        good_spu_id: this.good_spu_id,
        project_id: this.projectId
      };
      delete params.real_time
      getDetectWarnDetails(params).then(res => {
        if(res.errcode == 0) {
          this.listLoading = false
          this.tableData = res.data.list
        }
      })
    },
    linkClick(row) {
      this.resultSrc = row.report_list.map(el => {
        return el.img
      })
      this.resultVisibles = true
    },
    closeResult() {
      this.resultVisibles = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.result-wrap {
  max-height: 500px;
  overflow-y: auto;
}
</style>